<template>
  <div class="assistant-container">
    <el-container class="main-container">
      <el-header class="header">
        <div class="header-content">
          <h2>AI 后台设置</h2>
        </div>
      </el-header>

      <el-container class="content-container">
        <el-aside width="200px" class="aside">
          <el-menu
            :default-active="activeMenu"
            class="el-menu-vertical"
            background-color="#304156"
            text-color="#bfcbd9"
            active-text-color="#409EFF"
            router
          >
            <el-menu-item index="/setting/general">
              <el-icon><Setting /></el-icon>
              <span>通用设置</span>
            </el-menu-item>
            <el-menu-item index="/setting/permissions">
              <el-icon><User /></el-icon>
              <span>用户权限设置</span>
            </el-menu-item>
            <el-menu-item index="/setting/models">
              <el-icon><Cpu /></el-icon>
              <span>模型配置</span>
            </el-menu-item>
            <el-menu-item index="/setting/prompts">
              <el-icon><ChatDotRound /></el-icon>
              <span>提示词设置</span>
            </el-menu-item>
            <el-menu-item index="/setting/vector">
              <el-icon><DataLine /></el-icon>
              <span>向量库设置</span>
            </el-menu-item>
            <el-menu-item index="/setting/functions">
              <el-icon><Operation /></el-icon>
              <span>函数设置</span>
            </el-menu-item>
            <el-menu-item index="/setting/agents">
              <el-icon><User /></el-icon>
              <span>智能体设置</span>
            </el-menu-item>
            <el-menu-item index="/setting/workflows">
              <el-icon><Connection /></el-icon>
              <span>AI工作流设置</span>
            </el-menu-item>
            <el-menu-item index="/setting/api">
              <el-icon><Link /></el-icon>
              <span>接口设置</span>
            </el-menu-item>
            <el-menu-item index="/setting/monitor">
              <el-icon><Monitor /></el-icon>
              <span>监控中心</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <el-main class="main">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";
import { useRoute } from "vue-router";
import {
  Setting,
  User,
  Cpu,
  ChatDotRound,
  DataLine,
  Operation,
  Connection,
  Link,
  Monitor
} from "@element-plus/icons-vue";

export default defineComponent({
  name: "AiSetting",
  components: {
    Setting,
    User,
    Cpu,
    ChatDotRound,
    DataLine,
    Operation,
    Connection,
    Link,
    Monitor
  },
  setup() {
    const route = useRoute();
    const activeMenu = computed(() => route.path);

    return {
      activeMenu,
    };
  },
});
</script>

<style lang="scss" scoped>
.assistant-container {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .header {
    background-color: #fff;
    border-bottom: 1px solid #dcdfe6;
    height: 60px;
    padding: 0;

    .header-content {
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
    }
  }

  .content-container {
    flex: 1;
    overflow: hidden;
  }

  .aside {
    background-color: #304156;
    height: 100%;
    overflow: hidden;

    .el-menu-vertical {
      height: 100%;
      border-right: none;
    }
  }

  .main {
    background-color: #f5f7fa;
    padding: 20px;
    height: 100%;
    overflow: auto;
  }
}
</style> 